import React, { PureComponent } from 'react';
import { Card, Avatar, Icon, Tag, List, Row, Col } from 'antd';
import Link from 'umi/link';
import numeral from 'numeral';
import styles from '../../styles.less'


class deviceCard extends PureComponent {

    render() {
        const { deviceName, deviceSrc } = this.props;

        const parameters = [
            {
                "code": 1148855701968257000,
                "deviceCode": 1148784465791680500,
                "name": "功率",
                "type": "DI",
                "unit": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1
            },
            {
                "code": 1148855702060531700,
                "deviceCode": 1148784465791680500,
                "name": "流量",
                "type": "DI",
                "unit": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1
            },
            {
                "code": 1148855702098280400,
                "deviceCode": 1148784465791680500,
                "name": "测点1",
                "type": "DI",
                "unit": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1
            },
            {
                "code": 1148855702136029200,
                "deviceCode": 1148784465791680500,
                "name": "测点2",
                "type": "DI",
                "unit": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1
            },
            {
                "code": 1148855702186360800,
                "deviceCode": 1148784465791680500,
                "name": "测点3",
                "type": "DI",
                "unit": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1
            },
            {
                "code": 1148855702228303900,
                "deviceCode": 1148784465791680500,
                "name": "测点4",
                "type": "DI",
                "unit": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1
            }
        ];

        const parameters4 = parameters.slice(0, 4);
        return (
            <Card bordered={false} size="small" style={{ width: '200px' }}>
                <Row gutter={24} style={{ marginBottom: 16 }} >
                    <Col sm={12} xs={12} md={12}  >
                        <Link to="/iiot_monitor/device">
                            <img alt="example" src={deviceSrc}
                                style={{ height: '60px', width: '100px', paddingLeft: '12px', paddingTop: '12px' }} />
                        </Link>
                    </Col>
                    <Col sm={12} xs={12} md={12}  >
                        <span className={styles.spanStyle} style={{ marginBottom: 12, fontSize: '14px', textAlign: 'left' }} >{deviceName}</span>
                        <Tag color="#13C2C2"> &nbsp;开启&nbsp;</Tag>
                    </Col>
                </Row>
                <Row gutter={24} style={{ marginBottom: 0, paddingLeft: '12px' }}>
                    {
                        parameters4.map((item, index) => {
                            return (

                                <Col sm={12} xs={12} md={12}>
                                    <span className={styles.spanStyle} > {item.name}&nbsp;&nbsp;
                                           {numeral(2000).format('0,0')}   <small>{item.unit}</small> </span>
                                </Col>
                            )
                        })
                    }
                </Row>
            </Card>
        );
    }
}

export default deviceCard;
